<!--vue的template的最外层如果出现了div，只能是一个，不能并行-->
<!--主体部分el-main，也是子路由更换的部分-->
<template>
<div>

          <div >
            <!--搜索框-->
            <el-input
              style= "width: 250px"
              placeholder= "请输入课程号搜索"
              suffix-icon= "el-icon-user"
              class= "ml-5"
              v-model= "courId"
            ></el-input>
            <el-input
              style= "width: 250px"
              placeholder= "请输入课程名搜索"
              suffix-icon= "el-icon-chat-round"
              class= "ml-5"
              v-model= "courName"
            ></el-input>
            <el-input
              style= "width: 250px"
              placeholder= "请输入教师工号搜索"
              suffix-icon= "el-icon-user"
              class= "ml-5"
              v-model= "id"
            ></el-input>
            <el-input
              style= "width: 250px"
              placeholder= "请输入教师用户名搜索"
              suffix-icon= "el-icon-chat-round"
              class= "ml-5"
              v-model= "teacherName"
            ></el-input>
            <el-button class= "ml-5" type= "primary" plain @click= "load"
              ><b>搜索(支持模糊查询)</b></el-button
            >
            <el-button class= "ml-5" type= "info" plain @click= "clear"
              ><b>重置</b></el-button
            >
          </div>
          <div style= "margin: 10px 0">
            <el-button type= "primary" @click= "addHandler" 
              >新增
              <i class= "el-icon-circle-plus-outline"></i>
            </el-button>
          <el-popconfirm
                  confirm-button-text= "好的"
                  cancel-button-text= "不用了"
                  icon= "el-icon-info"
                  icon-color= "red"
                  title= "您确定批量删除吗？"
                  @confirm= "batchDeleteHandler">
            <el-button type= "danger" slot = "reference" style= "margin-left:10px">
              批量删除
            <i class= "el-icon-delete"></i>
            </el-button>
          </el-popconfirm>
          <!-- <el-button type= "success" style= "margin-left:10px"
              >导入
              <i class= "el-icon-download"></i>
            </el-button>
            <el-button type= "success"  
              >导出
              <i class= "el-icon-upload2"></i>
            </el-button> -->
          </div>
          <el-table
            :data= "tableData"
            border
            stripe
            header-cell-class-name= "headerBg"
            @selection-change ="batchDelete"
            ><!--表格边框+斑马线-->
            <!--header-cell可以改变表头颜色，header-row-class-name不可以-->
                <el-table-column type= "selection" width= "55" >
                </el-table-column>
            <!-- <el-table-column prop= "tcId" label= "uuid" width= "170">
            </el-table-column> -->
            <el-table-column prop= "id" label= "教师工号" width= "170">
            </el-table-column>
            <el-table-column prop= "teacherName" label= "教师用户名" width= "170">
            </el-table-column>    
            <el-table-column prop= "courId" label= "课程号" width= "170">
            </el-table-column>
            <el-table-column prop= "courName" label= "课程名" width= "170">
            </el-table-column>
            <el-table-column prop= "createTime" label= "创建时间" width= "170">
            </el-table-column>
            <el-table-column prop= "updateTime" label= "更新时间" width= "170">
            </el-table-column>
            <el-table-column label= "操作">
              <template slot-scope= "scope"><!--slot-scope= "scope"--><!--vscode说定义了但没用，报错却不影响运行，IDEA不报错-->
                <el-button type= "warning" @click= "editHandler(scope.row)">
                  编辑<i class= "el-icon-edit-outline"></i>
                </el-button>
                <el-popconfirm
                  confirm-button-text= "好的"
                  cancel-button-text= "不用了"
                  icon= "el-icon-info"
                  icon-color= "red"
                  title= "确定删除？"
                  @confirm= "deleteHandler(scope.row.tcId)">
                  <el-button type= "danger" slot = "reference" class= "ml-5">删除<i class= "el-icon-delete"></i></el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
          <div style= "padding: 10px 0">
            <!--分页-->
            <el-pagination
              @size-change= "handleSizeChange"
              @current-change= "handleCurrentChange"
              :current-page= "pageNum"
              :page-sizes= "[5, 10, 15, 20]"
              :page-size= "pageSize"
              layout= "total, sizes, prev, pager, next, jumper"
              :total= "total"
            >
            </el-pagination>
          </div>
<!-------------------------------------------------------------------------->
              <el-dialog title= "授课信息" :visible.sync= "dialogFormVisible" width= "30%">
          <el-form>
            <!-- <el-form-item label= "uuid">
              <el-input v-model= "form.tcId" 
              autocomplete= "off" 
              aria-required= "true"
              :disabled="true"></el-input>
            </el-form-item> -->
            <el-form-item label= "课程号">
              <el-input v-model= "form.courId" 
              autocomplete= "off" 
              aria-required= "true" ></el-input>
            </el-form-item>
            <el-form-item label= "课程名">
              <el-input
                v-model= "form.courName"
                autocomplete= "off"
                aria-required= "true"
              ></el-input>
            </el-form-item>
            <el-form-item label= "教师工号">
              <el-input v-model= "form.id" 
              autocomplete= "off" 
              aria-required= "true"
              ></el-input>
            </el-form-item>
            <el-form-item label= "教师用户名">
              <el-input
                v-model= "form.teacherName"
                autocomplete= "off"
                aria-required= "true"
              ></el-input>
            </el-form-item>
          </el-form>
          <div slot= "footer" class= "dialog-footer">
            <!-- <el-button type= "primary" @click= "update"> 编辑</el-button> -->
            <el-button type= "primary" @click= "save"> 确定</el-button> 
            <el-button @click= "dialogFormVisible = false"> 取 消</el-button>
               
          </div>
        </el-dialog>
        <!-- <el-dialog title= "提示" :visible.sync= "dialogVisible" width= "30%">
          <span>这是一段信息</span>
          <span slot= "footer" class= "dialog-footer">
            <el-button @click= "dialogVisible = false">取 消</el-button>
            <el-button type= "primary" @click= "dialogVisible = false">确 定</el-button>
          </span>
        </el-dialog>     -->
</div>
</template>
<script>
export default {
  name: "Teaching",
  data() {
    return {
      //模糊分页查询
      tableData: [], 
      total: 0, //总条数
      pageNum: 1, //第几页
      pageSize: 5, //每页几条数据
      tcId:null,
      courId: null,
      id: null,
      courName:'',  
      teacherName:'',
      createTime: "",
      updateTime: "",
      //Dialog对话框
      dialogFormVisible: false,
      //多选框
      form: {},
      multipleSelection: [],
      //表格样式
      headBg: "headBg",
      dialogVisible: false,
    };
  },
  created() {
    this.load();
  },
  methods: {
    /*分页功能实现，与后端数据联动 */
    //MyBatis使用fetch方法自己将前后端连接起来（跨域问题的解决方法之一是在后端配置CoresConfig类开放后端端口），
    load() {
      //MyBatis-plus的时候我们使用axios将前后端数据联动
      //先安装axios，然后直接用就行
      this.request
        .get("http://localhost:8081/teaching/page", {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            id:this.id,
            courId:this.courId,
            teacherName:this.teacherName,
            courName: this.courName,
            createTime: this.createTime,
            updateTime: this.updateTime,
          },
        })
        .then((res) => {
          console.log(res);

          this.tableData = res.data.records;
          this.total = res.data.total;
        });
    },
    handleSizeChange(pageSize) {
      console.log(pageSize);
      this.pageSize = pageSize;
      this.load();
    },
    handleCurrentChange(pageNum) {
      console.log(pageNum);
      this.pageNum = pageNum;
      this.load();
    },
    //模糊查询重置按钮方法
    clear() {
      this.courName = "";
      this.courId = null;
      this.teacherName="";
      this.id=null;
      this.load();
    },

    //(和对话框一起使用，点击按钮触发对话框，填写信息之后确定按钮进行最终操作)
    //编辑按钮实现
    editHandler(row) {
      //先将row的数据赋值给form，然后打开弹窗
      this.form = row;
      this.dialogFormVisible = true;
    },
    addHandler() {
      this.dialogFormVisible = true;
      this.form = {};
    },
    //后续操作（确定/取消按钮--->保存表单信息，删除表单信息，导入记录，导出记录）

    save() {
      //插入
      this.request
        .post("http://localhost:8081/teaching/", this.form)
        .then((res) => {
          if (res.flag=='200') {
            this.$message.success("新增或编辑成功");
            this.dialogFormVisible = false;
            this.load();
          } else {
            this.$message.error(res.msg);
            this.dialogFormVisible = false;
          }
        });
    },
    // update() {
    //   //插入
    //   this.request
    //     .post("http://localhost:8081/course/update", this.form)
    //     .then((res) => {
    //       if (res.flag=='200') {
    //         this.$message.success("编辑成功");
    //         this.dialogFormVisible = false;
    //         this.load();
    //       } else {
    //         this.$message.error(res.msg);
    //         this.dialogFormVisible = false;
    //       }
    //     });
    // },
    //批量删除+普通单个删除
    batchDelete(val) {
      this.multipleSelection = val;
      console.log(val);
    },
    batchDeleteHandler() {
      let tcIds = this.multipleSelection.map((v) => v.tcId); //将对象数组转化为id数组

      this.request
        .post("/teaching/batchDelete", tcIds)   
        // .then((ids) => {
        //   if (ids == []) {
        //     this.$message.error("请先勾选要批量删除的记录!");
        //   }
        // })
        .then((res) => {
          if (res.flag == '200') {
            this.$message.success(res.msg);
            this.load();
          } else {
            this.$message.error(res.msg);
            this.dialogFormVisible = false;
          }
        });
    },

    deleteHandler(tcId) {
      this.request.delete("/teaching/" + tcId).then((res) => {
        if (res.flag == '200') {
          this.$message.success(res.msg);
          this.load();
        } else {
          this.$message.error(res.msg);
          this.dialogFormVisible = false;
        }
      });
    },
  },
};
</script>
<style>
.headerBg {
  background: #eee !important;
}
</style>